<template>
    <div class="chart-selector">
        <div v-if="viewType.includes('chartTypes')" class="button-group">
            <span>图表样式</span>
            <el-button v-for="type in chartTypes" :key="type.value"
                :class="{ 'is-active': modelValue.chartType === type.value }" @click="updateChartType(type.value)"
                round>
                <template #icon>
                    <i :class="type.icon"></i>
                </template>
            </el-button>
        </div>

        <div v-if="viewType.includes('periods')" class="button-group">
            <span>横轴单位</span>
            <el-button v-for="period in periods" :key="period.value"
                :class="{ 'is-active': modelValue.period === period.value }" @click="updatePeriod(period.value)" round>
                {{ period.label }}
            </el-button>
        </div>

        <div v-if="showComparison" class="button-group">
            <span>对比</span>
            <el-button v-for="comp in comparisonTypes" :key="comp.value"
                :class="{ 'is-active': modelValue.comparison === comp.value }" @click="updateComparison(comp.value)"
                round>
                {{ comp.label }}
            </el-button>

            <template v-if="modelValue.comparison === 'custom'">
                <el-date-picker v-if="modelValue.period === 'half_hour'" v-model="modelValue.comparisonDate" type="date"
                    placeholder="选择对比日期" @change="updateComparisonDate" />
                <el-date-picker v-else-if="modelValue.period === 'day'" v-model="modelValue.comparisonDate" type="month"
                    placeholder="选择对比月份" @change="updateComparisonDate" />
                <el-date-picker v-else-if="modelValue.period === 'month'" v-model="modelValue.comparisonDate"
                    type="year" placeholder="选择对比年份" @change="updateComparisonDate" />
            </template>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
    viewType: {
        type: Array,
        default: () => ['periods', 'chartTypes', 'comparison']
    },
    modelValue: {
        type: Object,
        required: true,
        default: () => ({
            chartType: 'bar',
            period: 'half_hour',
            comparison: 'none',
            comparisonDate: null
        })
    },
    chartId: {
        type: String,
        default: 'default'
    }
})

const emit = defineEmits(['update:modelValue'])

const showComparison = computed(() => {
    return props.viewType.includes('comparison') &&
        ['half_hour', 'day', 'month'].includes(props.modelValue.period)
})

const chartTypes = [
    { value: 'line', icon: 'fa fa-line-chart', label: '折线图' },
    { value: 'bar', icon: 'fa fa-bar-chart', label: '柱状图' }
]

const periods = [
    { value: 'half_hour', label: '时' },
    { value: 'week', label: '星期' },
    { value: 'day', label: '日' },
    { value: 'month', label: '月' },
    { value: 'quarter', label: '季度' },
    { value: 'year', label: '年' }
]

const comparisonTypes = [
    { value: 'none', label: '不对比' },
    { value: 'last_period', label: '上个周期' },
    { value: 'last_year', label: '去年同期' },
    { value: 'custom', label: '自定义' }
]

const updateChartType = (type) => {
    emit('update:modelValue', { ...props.modelValue, chartType: type })
}

const updatePeriod = (period) => {
    emit('update:modelValue', {
        ...props.modelValue,
        period,
        comparison: 'none',
        comparisonDate: null
    })
}

const updateComparison = (comparison) => {
    emit('update:modelValue', {
        ...props.modelValue,
        comparison,
        comparisonDate: comparison === 'custom' ? props.modelValue.comparisonDate : null
    })
}

const updateComparisonDate = (date) => {
    emit('update:modelValue', { ...props.modelValue, comparisonDate: date })
}
</script>

<style scoped>
.chart-selector {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    align-items: flex-start;
}

.button-group {
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    color: var(--color-text-primary);
    gap: var(--gap-small);
    margin-right: 2rem;
}

:deep(.el-date-editor) {
    margin-left: var(--gap-small);
    width: auto;
}

@media screen and (max-width: 768px) {
    .chart-selector {
        flex-direction: column;
        align-items: flex-start;
    }

    .button-group {
        flex-wrap: wrap;
    }
}
</style>